import React from 'react';
import { Card, Row, Col, Statistic } from 'antd';
import { UserOutlined, FileOutlined, CommentOutlined, TagOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';

interface Statistics {
    userCount: number;
    articleCount: number;
    commentCount: number;
    tagCount: number;
}

const Home: React.FC = () => {
    const { data: stats, loading } = useRequest<Statistics>('/api/admin/statistics');
    
    return (
        <div>
            <h2 className="mb-6">管理员仪表板</h2>
            <Row gutter={[16, 16]}>
                <Col span={6}>
                    <Card>
                        <Statistic
                            title="用户总数"
                            value={stats?.userCount ?? 0}
                            prefix={<UserOutlined />}
                            loading={loading}
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic
                            title="文章总数"
                            value={stats?.articleCount ?? 0}
                            prefix={<FileOutlined />}
                            loading={loading}
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic
                            title="评论总数"
                            value={stats?.commentCount ?? 0}
                            prefix={<CommentOutlined />}
                            loading={loading}
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic
                            title="标签总数"
                            value={stats?.tagCount ?? 0}
                            prefix={<TagOutlined />}
                            loading={loading}
                        />
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default Home; 